<template>
	<view class="comment-container">
		<!-- 头部用户信息及评价统计（横向排列，头像左，统计右） -->
		<view class="header-row">
			<view class="avatar-box">
				<image class="avatar-img" src="/static/svg/default-avatar.svg" mode="aspectFill"></image>
			</view>
			<view class="stats-row">
				<view class="stats-tab" @click="activeTab = 0">
					<view :class="['stats-title', activeTab === 0 ? 'active' : '']">全部评价</view>
					<view :class="['stats-number', activeTab === 0 ? 'active-num' : '']">9</view>
				</view>
				<view class="stats-tab" @click="activeTab = 1">
					<view :class="['stats-title', activeTab === 1 ? 'active-wait' : '']">待评价</view>
					<view :class="['stats-number', activeTab === 1 ? 'active-num-wait' : '']">2</view>
				</view>
			</view>
		</view>

		<!-- 内容切换动画 -->
		<view class="tab-content-wrapper">
			<view :class="['tab-content', activeTab === 0 ? 'fade-in' : 'fade-out']" v-show="activeTab === 0">
				<!-- 全部评价内容 -->
				<view class="order-list">
					<view class="order-item" v-for="(item, index) in orderList" :key="index">
						<view class="order-number">订单号：4186283277</view>
						<view class="product-card">
							<view class="product-image">
								<image src="/static/svg/matcha-cake.svg" mode="aspectFill"></image>
								<view class="group-tag">3人团</view>
							</view>
							<view class="product-info">
								<view class="product-name">艾丽苏抹茶蛋糕早点低塘健康</view>
								<view class="product-sku">实惠装</view>
								<view class="product-count">×1</view>
							</view>
							<view class="product-price">¥136</view>
						</view>
						<view class="btn-container">
							<button class="comment-btn" @click="comment">评价</button>
						</view>
					</view>
				</view>
				<!-- 评价列表 -->
				<view class="comment-list">
					<view class="comment-item" v-for="(item, index) in commentList" :key="index">
						<view class="comment-header">
							<view class="commenter-avatar">
								<image src="/static/svg/default-avatar.svg" mode="aspectFill"></image>
							</view>
							<view class="commenter-info">
								<view class="commenter-name">小**宇</view>
								<view class="commenter-date">2018-09-06 50ml铃兰香</view>
							</view>
						</view>
						<view class="comment-content">
							是我想要的香水，淡淡的花香味。很适合夏天用，也很小清新。最主要是价格很实惠。人人都消费得起。很精致的包装，还送了小样和香袋！店家真的很用心。香水很便宜，但是味道一点也不像那种廉价香水，味道很清新，持久性也比较久。值得回购！
						</view>
						<view class="comment-images">
							<image 
								v-for="(img, imgIndex) in 6" 
								:key="imgIndex" 
								src="/static/svg/perfume-bottle.svg" 
								mode="aspectFill"
								class="comment-image">
							</image>
						</view>
						<view class="comment-footer">
							<view class="view-count">浏览 156 次</view>
							<view class="like-count">
								<image src="/static/svg/heart-like.svg" mode="aspectFit" class="icon-small"></image>
								点赞 25 次
							</view>
							<view class="delete-btn">
								<image src="/static/svg/delete-icon.svg" mode="aspectFit" class="icon-small"></image>
								删除评价
							</view>
						</view>
					</view>
				</view>
			</view>
			<view :class="['tab-content', activeTab === 1 ? 'fade-in' : 'fade-out']" v-show="activeTab === 1">
				<!-- 待评价内容 -->
				<view class="order-list">
					<view class="order-item" v-for="(item, index) in orderList" :key="index">
						<view class="order-number">订单号：4186283277</view>
						<view class="product-card">
							<view class="product-image">
								<image src="/static/svg/matcha-cake.svg" mode="aspectFill"></image>
								<view class="group-tag">3人团</view>
							</view>
							<view class="product-info">
								<view class="product-name">艾丽苏抹茶蛋糕早点低塘健康</view>
								<view class="product-sku">实惠装</view>
								<view class="product-count">×1</view>
							</view>
							<view class="product-price">¥136</view>
						</view>
						<view class="btn-container">
							<button class="comment-btn" @click="comment">评价</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部标记 -->
		<view class="bottom-indicator">
			已显示全部
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';

	// 当前选中的tab，0-全部评价，1-待评价
	const activeTab = ref(0);

	// 示例数据
	const orderList = ref([1, 2]); // 待评价订单
	const commentList = ref([1, 2]); // 已评价

	onMounted(() => {
		// 加载数据
	});


	const comment = () => {
		console.log('评价')
		uni.navigateTo({
			url: '/pages/my/comment_review'
		})
	}

</script>

<style>
	.comment-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	
	/* 头部用户信息及评价统计（横向排列，头像左，统计右） */
	.header-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #fff;
		padding: 40rpx 0 30rpx 0;
		margin-bottom: 10rpx;
		justify-content: center;
	}
	
	.avatar-box {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 6rpx solid #fe6433;
		overflow: hidden;
		margin-right: 48rpx;
		flex-shrink: 0;
	}
	
	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.stats-row {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		gap: 80rpx;
	}
	
	.stats-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		min-width: 120rpx;
	}
	
	.stats-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 8rpx;
		font-weight: 500;
	}
	
	.stats-title.active {
		color: #222;
		font-weight: bold;
	}
	
	.stats-title.active-wait {
		color: #ff6b41;
		font-weight: bold;
	}
	
	.stats-number {
		font-size: 48rpx;
		color: #333;
		font-weight: 500;
		line-height: 1;
	}
	
	.stats-number.active-num {
		color: #222;
		font-size: 56rpx;
		font-weight: bold;
	}
	
	.stats-number.active-num-wait {
		color: #ff6b41;
		font-size: 56rpx;
		font-weight: bold;
	}
	
	/* 订单项样式 */
	.order-item {
		background-color: #ffffff;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	
	.order-number {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.product-card {
		display: flex;
		position: relative;
		padding-bottom: 20rpx;
	}
	
	.product-image {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		margin-right: 20rpx;
	}
	
	.product-image image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}
	
	.group-tag {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #ff6b41;
		color: white;
		font-size: 22rpx;
		padding: 4rpx 10rpx;
		border-radius: 0 8rpx 0 8rpx;
	}
	
	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.product-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.product-sku {
		font-size: 26rpx;
		color: #999;
	}
	
	.product-count {
		font-size: 26rpx;
		color: #999;
		position: absolute;
		right: 0;
		bottom: 20rpx;
	}
	
	.product-price {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.btn-container {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}
	
	.comment-btn {
		background-color: #ffffff;
		color: #ff6b41;
		border: 1px solid #ff6b41;
		font-size: 28rpx;
		padding: 8rpx 30rpx;
		border-radius: 30rpx;
		line-height: 1.5;
	}
	
	/* 评价列表样式 */
	.comment-item {
		background-color: #ffffff;
		margin-bottom: 20rpx;
		padding: 30rpx;
		border-radius: 10rpx;
	}
	
	.comment-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.commenter-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
	}
	
	.commenter-avatar image {
		width: 100%;
		height: 100%;
	}
	
	.commenter-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 6rpx;
	}
	
	.commenter-date {
		font-size: 24rpx;
		color: #999;
	}
	
	.comment-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}
	
	.comment-images {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}
	
	.comment-image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		border-radius: 6rpx;
	}
	
	.comment-footer {
		display: flex;
		font-size: 24rpx;
		color: #999;
		align-items: center;
	}
	
	.view-count, .like-count {
		margin-right: 30rpx;
		display: flex;
		align-items: center;
	}
	
	.delete-btn {
		margin-left: auto;
		color: #666;
		display: flex;
		align-items: center;
	}
	
	.icon-small {
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
		margin-right: 6rpx;
	}
	
	/* 底部标记 */
	.bottom-indicator {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		margin: 30rpx 0;
		position: relative;
	}
	
	.bottom-indicator::before,
	.bottom-indicator::after {
		content: '';
		display: inline-block;
		width: 80rpx;
		height: 1px;
		background-color: #ddd;
		margin: 0 20rpx;
		vertical-align: middle;
	}
	
	.tab-content-wrapper {
		position: relative;
		min-height: 300rpx;
	}
	.tab-content {
		transition: opacity 0.35s cubic-bezier(.4,0,.2,1);
		will-change: opacity;
	}
	.fade-in {
		opacity: 1;
		pointer-events: auto;
	}
	.fade-out {
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
</style>
